import type { EChartsOption } from "echarts";

export const leftCenterConfig = (xData: any, yData: any): EChartsOption => ({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
    backgroundColor: "rgba(84,112,198,0.71)",
  },
  animation: false,
  grid: {
    left: "2%",
    right: "2%",
    top: "2%",
    bottom: "2%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#7E879E",
        },
      },
      splitLine: {
        //格线样式
        show: false,
      },
    },
  ],
  yAxis: [
    {
      axisLabel: {
        color: "rgba(255,255,255,0.9)",
        fontSize: 14, //刻度大小
      },
      type: "category",
      data: xData,
      axisTick: {
        show: true,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#7E879E",
          width: 1,
          type: "solid",
        },
      },
    },
  ],
  series: [
    {
      name: "今日在线时长",
      type: "bar",
      data: yData,
      barWidth: "60%",
      itemStyle: {
        //这里是重点
        color: function (params: any) {
          return params.data >= 40
            ? {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#34c682", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(58,132,255, 0)", // 100% 处的颜色
                  },
                ],
              }
            : {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#ff0000", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(58,132,255, 0)", // 100% 处的颜色
                  },
                ],
              };
        },
      },
    },
  ],
});
